<template>
  <div class="wrapper wrapper-content animated fadeInRight v-cloak" v-cloak>
    <ul class="nav nav-tabs">
      <li class="active"><a href="#chart" data-toggle="tab" @click="initBar()">图表展示</a></li>
      <li><a href="#table" data-toggle="tab" @click="page(1)">列表展示</a></li>
    </ul>

    <div class="tab-content">
      <div class="tab-pane active" id="chart" style="margin-top: 10px">
        <div class="col-md-12">
          <form id="bar_search_form" role="form" class="form-inline" method="post" accept-charset="UTF-8"
              @submit.prevent="page(1)">

          </form>
        </div>
        <div class="col-md-6">
          <div class="echarts col-md-12" id="echarts1"></div>
        </div>

        <div class="col-md-12">
          <div class="echarts col-md-12" id="echarts2"></div>
        </div>
      </div>
      <div class="tab-pane" style="margin-top: 10px" id="table">
        <div class="row">
          <div class="col-md-12">
            <form id="info_search_form" role="form" class="form-inline" method="post" accept-charset="UTF-8"
                @submit.prevent="page(1)">
              <vue-area-4
                  areaId="areaId"
                  areaName="areaName"
                  :areaIdVal="staff.dto().areaId"
                  :areaNameVal="staff.dto().areaName"
                  :areaFixed="staff.dto().areaId"
                  :selectBy="staff.dto().areaId"
              ></vue-area-4>
              <div class="form-group">
                <input type="text" name="keyword" placeholder="请输入关键词" class="input-sm form-control">
              </div>
              <div class="form-group">
                <button type="submit" class="btn btn-sm btn-primary">搜索</button>
                <button type="reset" class="btn btn-sm btn-dafault">重置</button>
              </div>
            </form>
            <a href="javascript:;" @click="exportXls()"
                class="btn btn-info m-t"><i class="fa fa-file-excel-o"></i> 导出数据</a>
            <div class="table-responsive table-scrollable">
              <table class="table table-bordered table-striped  table-hover">
                <thead>
                <tr>
                  <th style="width:20px;">#</th>
                  <th>行政区划</th>
                  <th>乡镇级河道</th>
                  <th>村级河道</th>
                </tr>
                </thead>
                <tbody>
                <tr v-if="result.data.data && result.data.data.length>0" v-for="(item, index) in result.data.data">
                  <td>{{ (result.data.pageIndex - 1) * result.data.pageSize + index + 1 }}</td>
                  <td>{{ item.name }}</td>
                  <td>{{ item.num1 }}</td>
                  <td>{{ item.num2 }}</td>
                </tr>
                <tr v-if="result.data.data==null || result.data.data.length==0">
                  <td colspan="4">
                    <div class="alert"><strong>{{ result | message }}</strong></div>
                  </td>
                </tr>
                </tbody>
              </table>
              <div class="b_page" v-html="tagPages"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style>
.echarts {
  height: 300px;
}
</style>
<script type="text/javascript">
import '@/assets/css/style.css'

import $ from '@/assets/js/jquery-vendor.js'
import 'jquery.cookie'
import axios from 'axios'
import '@/assets/js/datepicker-vendor.js'
import {$storage, axiosContentType, site} from '@/assets/js/boss'
import '@/assets/js/pageTag'
import echarts from 'echarts'
import Swal from 'sweetalert2'
import vueArea4 from '@/components/vue-area-4'

let echarts1;
let option1;
let echarts2;
let option2;
export default {
  data() {
    return {
      result: {data: {pageIndex: 1, data: []}, message: ''},
      tagPages: ''
    }
  },
  components: {
    'vue-area-4': vueArea4, echarts
  },
  mounted() {
    let that = window.$vueApp = this;
    document.getElementsByTagName('body')[0].className = 'fixed-sidebar full-height-layout';
    this.staff.init(function () {
      that.initEcharts1();
      that.initEcharts2();
    });
  },
  methods: {
    page(pageIndex) {
      let that = this;
      if (!pageIndex) pageIndex = 1;
      axios.post(site.analysis.riverReach.page + pageIndex
          , $('#info_search_form').serialize()
          , axiosContentType.xWwwFormUrlencoded
      ).then(function (response) {
        const result = response.data;
        if (result.code === 0) {
          that.result = result;
          that.tagPages = that.tag.page(result.data);
        } else {
          Swal.fire(result.message);
        }
      });
    },
    initEcharts1() {
      // 初始化饼图
      echarts1 = echarts.init(document.getElementById('echarts1'));

      // 获取数据
      axios.post(site.analysis.riverReach.statLevelNum
          , null
          , axiosContentType.xWwwFormUrlencoded
      ).then(function (response) {
        const result = response.data;
        if (result.code === 0) {
          let names = [];
          let values = [];
          let totalNum = 0;
          for (let i in result.data) {
            let data = result.data[i];
            names.push(data.level);
            let value = {'value': data.num1, name: data.level};
            values.push(value);
            totalNum += data.num1;
          }
          option1 = {
            title: {
              text: '各级河段统计（' + totalNum + '）',
              subtext: '',
              x: 'center'
            },
            tooltip: {
              trigger: 'item',
              formatter: '{b} : {c}个 ({d}%)'
            },
            legend: {
              orient: 'vertical',
              x: 'right',
              top: '100px',
              data: names
            },
            calculable: true,
            series: {
              name: '',
              type: 'pie',
              radius: '55%',
              center: ['50%', '60%'],
              data: values
            }
          };
          echarts1.setOption(option1);
        } else {
          Swal.fire(result.message);
        }
      });
      $(window).resize(echarts1.resize);
    },
    initEcharts2() {
      // 初始化柱状图
      echarts2 = echarts.init(document.getElementById('echarts2'));
      // 获取数据
      axios.post(site.analysis.riverReach.page + 1 + '?echartsFlag=true'
          , null
          , axiosContentType.xWwwFormUrlencoded
      ).then(function (response) {
        const result = response.data;
        if (result.code === 0) {
          // console.log(result);
          let names = [];
          let values = [];
          for (let i in result.data.data) {
            let data = result.data.data[i];
            names.push(data.name);
            values.push(data.num);
          }
          option2 = {
            title: {
              text: '次级行政区河段统计'
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
              }
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: [
              {
                type: 'category',
                data: names,
                axisTick: {
                  alignWithLabel: true
                }
              }
            ],
            yAxis: [
              {
                type: 'value'
              }
            ],
            series: [
              {
                name: '河段数量',
                type: 'bar',
                barWidth: '60%',
                data: values
              }
            ]
          };
          echarts2.setOption(option2);
        } else {
          Swal.fire(result.message);
        }
      });
      $(window).resize(echarts2.resize);
    },
    initBar() {
      let that = this;
      that.initEcharts1();
      that.initEcharts2();
    },
    exportXls() {
      let formJson = $('#info_search_form').serializeObject();
      // console.info(formJson)
      var formHtmlStr = `<form method="post" action="${site.analysis.riverReach.exportXls}">
                               <input type="hidden" name="Authorization" value="${$storage.getItem('authorizationToken')}">`;
      for (let key in formJson) {
        // console.info(key)
        formHtmlStr += `<input type="hidden" name="${key}" value="${formJson[key]}">`;
      }
      formHtmlStr += `</form>`;
      // console.info(formHtmlStr)
      var $eleForm = $(formHtmlStr);
      $(document.body).append($eleForm);
      // 提交表单，实现下载
      $eleForm.submit().remove();
    }
  }
}
</script>
